<template>
  <div class="myorder">
        <!-- <HeaderTop title="我的订单"></HeaderTop> -->
      <!-- <van-tabs v-model="active" @click="tabsClick" :swipe-threshold='num' sticky>
        <van-tab title="全部" class="myorder-list"> -->
        <ul class='selectItems' style="background-color:#fff;">
            <li v-for="(item,index) in selectItems" :key='index' :class='{"active":selectedIndex==index}' @click='selectItem(item,index)' >{{item.name}}</li>
        </ul>
         <div class='content-box' :style="{ height: wrapperHeight + 'px' }">
            <div v-if='selectedIndex==0' class="box box1" ref='wrapper'  :style="{ height: wrapperHeight + 'px' }">
              <mt-loadmore  :top-method="loadTop" v-if='selectedIndex==0&&allOrderList.length'  :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"  :bottom-drop-text='bottomText' ref="loadmore">
                <ul class="myorder-list" v-if="allOrderList.length" :style="{height:'auto',minHeight: wrapperHeight + 'px'}" >
                 <li class="myorder-li" v-for="(item,index) in allOrderList" :key="index" >
                    <div @click="goto(item.orderStatus,item.status,item.orderId)">
                        <h3 class="myorder-state">订单状态：{{item.status === 1 ? allOrderStatus[item.orderStatus] : refundOrderStatus[item.status]}}</h3>
                        <div class="myorder-num">
                            <div class="cartbg">
                                <img v-for="(img,index) in item.goodsImgList" :key="index" class="cartbgI" :src="img" alt="">
                            </div>
                            <div class="total">
                                <p>共<span>{{item.goodsNum}}</span>件</p >
                                <img src="./img/zhankai1.png" alt="">
                            </div>
                        </div>
                        <div class="myorder-price">
                            <p class="date">{{item.orderTime}}</p >
                            <p class="price">实付金额:<span>￥{{item.orderAmountTotal}}</span></p >
                        </div>
                    </div>
                    <div v-if="item.status == 1 && item.orderStatus == 1" class="myorder-pay">
                        <button class="pay-bt" @click="payNow(item.orderId)">立即支付</button>
                    </div>
                    <div v-if="item.status == 1 && item.orderStatus == 4" class="myorder-pay">
                        <button class="pay-bt" @click="evaluateNow(item.orderId)">立即评价</button>
                    </div>
                </li>
                <p v-if="allLoaded&&(selectedIndex==0)" class='allloaded'>已加载全部</p>
               </ul>
              </mt-loadmore>
              <div v-else  class='nodata'> <img class="nodataImg" src="../../assets/img/noData.png" alt=""> </div>
            </div>
            <div v-if='selectedIndex==1' class="box box1" ref='wrapper'  :style="{ height: wrapperHeight + 'px' }">
              <mt-loadmore  :top-method="loadTop" v-if='selectedIndex==1&&allOrderList.length'  :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"  :bottom-drop-text='bottomText' ref="loadmore">
                <ul class="myorder-list" v-if="allOrderList.length" :style="{height:'auto',minHeight: wrapperHeight + 'px'}" >
                 <li class="myorder-li" v-for="(item,index) in allOrderList" :key="index">
                    <div @click="goto(item.orderStatus,item.status,item.orderId)">
                        <h3 class="myorder-state">订单状态：{{allOrderStatus[item.orderStatus]}}</h3>
                        <div class="myorder-num">
                            <div class="cartbg">
                                <img v-for="(img,index) in item.goodsImgList" :key="index" class="cartbgI" :src="img" alt="">
                            </div>
                            <div class="total">
                                <p>共<span>{{item.goodsNum}}</span>件</p >
                                <img src="./img/zhankai1.png" alt="">
                            </div>
                        </div>
                        <div class="myorder-price">
                            <p class="date">{{item.orderTime}}</p >
                            <p class="price">实付金额:<span>￥{{item.orderAmountTotal}}</span></p >
                        </div>
                    </div>
                    <div v-if="item.status == 1 && item.orderStatus == 1" class="myorder-pay">
                        <button class="pay-bt" @click="payNow(item.orderId)" >立即支付</button>
                    </div>
                    <div v-if="item.status == 1 && item.orderStatus == 4" class="myorder-pay">
                        <button class="pay-bt" @click="evaluateNow(item.orderId)">立即评价</button>
                    </div>
                </li>
                <p v-if="allLoaded&&(selectedIndex==1)" class='allloaded'>已加载全部</p>
               </ul>
              </mt-loadmore>
              <div v-else  class='nodata'> <img class="nodataImg" src="../../assets/img/noData.png" alt=""> </div>
            </div>
            <div v-if='selectedIndex==2' class="box box1" ref='wrapper'  :style="{ height: wrapperHeight + 'px' }">
              <mt-loadmore  :top-method="loadTop" v-if='selectedIndex==2&&allOrderList.length'  :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"  :bottom-drop-text='bottomText' ref="loadmore">
                <ul class="myorder-list" v-if="allOrderList.length" :style="{height:'auto',minHeight: wrapperHeight + 'px'}" >
                 <li class="myorder-li" v-for="(item,index) in allOrderList" :key="index" >
                    <div @click="goto(item.orderStatus,item.status,item.orderId)">
                        <h3 class="myorder-state">订单状态：{{allOrderStatus[item.orderStatus]}}</h3>
                        <div class="myorder-num">
                            <div class="cartbg">
                                <img v-for="(img,index) in item.goodsImgList" :key="index" class="cartbgI" :src="img" alt="">
                            </div>
                            <div class="total">
                                <p>共<span>{{item.goodsNum}}</span>件</p >
                                <img src="./img/zhankai1.png" alt="">
                            </div>
                        </div>
                        <div class="myorder-price">
                            <p class="date">{{item.orderTime}}</p >
                            <p class="price">实付金额:<span>￥{{item.orderAmountTotal}}</span></p >
                        </div>
                    </div>
                    <div v-if="item.status == 1 && item.orderStatus == 1" class="myorder-pay">
                        <button class="pay-bt" @click="payNow(item.orderId)">立即支付</button>
                    </div>
                    <div v-if="item.status == 1 && item.orderStatus == 4" class="myorder-pay">
                        <button class="pay-bt" @click="evaluateNow(item.orderId)">立即评价</button>
                    </div>
                </li>
                <p v-if="allLoaded&&(selectedIndex==2)" class='allloaded'>已加载全部</p>
               </ul>
              </mt-loadmore>
              <div v-else  class='nodata'> <img class="nodataImg" src="../../assets/img/noData.png" alt=""> </div>
            </div>
            <div v-if='selectedIndex==3' class="box box1" ref='wrapper'  :style="{ height: wrapperHeight + 'px' }">
              <mt-loadmore  :top-method="loadTop" v-if='selectedIndex==3&&allOrderList.length'  :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"  :bottom-drop-text='bottomText' ref="loadmore">
                <ul class="myorder-list" v-if="allOrderList.length" :style="{height:'auto',minHeight: wrapperHeight + 'px'}" >
                 <li class="myorder-li" v-for="(item,index) in allOrderList" :key="index" >
                    <div @click="goto(item.orderStatus,item.status,item.orderId)">
                        <h3 class="myorder-state">订单状态：{{allOrderStatus[item.orderStatus]}}</h3>
                        <div class="myorder-num">
                            <div class="cartbg">
                                <img v-for="(img,index) in item.goodsImgList" :key="index" class="cartbgI" :src="img" alt="">
                            </div>
                            <div class="total">
                                <p>共<span>{{item.goodsNum}}</span>件</p >
                                <img src="./img/zhankai1.png" alt="">
                            </div>
                        </div>
                        <div class="myorder-price">
                            <p class="date">{{item.orderTime}}</p >
                            <p class="price">实付金额:<span>￥{{item.orderAmountTotal}}</span></p >
                        </div>
                    </div>
                    <div v-if="item.status == 1 && item.orderStatus == 1" class="myorder-pay">
                        <button class="pay-bt" @click="payNow(item.orderId)">立即支付</button>
                    </div>
                    <div v-if="item.status == 1 && item.orderStatus == 4" class="myorder-pay">
                        <button class="pay-bt" @click="evaluateNow(item.orderId)">立即评价</button>
                    </div>
                </li>
                <p v-if="allLoaded&&(selectedIndex==3)" class='allloaded'>已加载全部</p>
               </ul>
              </mt-loadmore>
              <div v-else  class='nodata'> <img class="nodataImg" src="../../assets/img/noData.png" alt=""> </div>
            </div>
            <div v-if='selectedIndex==4' class="box box1" ref='wrapper'  :style="{ height: wrapperHeight + 'px' }">
              <mt-loadmore  :top-method="loadTop" v-if='selectedIndex==4&&allOrderList.length'  :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"  :bottom-drop-text='bottomText' ref="loadmore">
                <ul class="myorder-list" v-if="allOrderList.length" :style="{height:'auto',minHeight: wrapperHeight + 'px'}" >
                 <li class="myorder-li" v-for="(item,index) in allOrderList" :key="index" >
                    <div @click="goto(item.orderStatus,item.status,item.orderId)">
                        <h3 class="myorder-state">订单状态：{{allOrderStatus[item.orderStatus]}}</h3>
                        <div class="myorder-num">
                            <div class="cartbg">
                                <img v-for="(img,index) in item.goodsImgList" :key="index" class="cartbgI" :src="img" alt="">
                            </div>
                            <div class="total">
                                <p>共<span>{{item.goodsNum}}</span>件</p >
                                <img src="./img/zhankai1.png" alt="">
                            </div>
                        </div>
                        <div class="myorder-price">
                            <p class="date">{{item.orderTime}}</p >
                            <p class="price">实付金额:<span>￥{{item.orderAmountTotal}}</span></p >
                        </div>
                    </div>
                    <div v-if="item.status == 1 && item.orderStatus == 1" class="myorder-pay">
                        <button class="pay-bt" @click="payNow(item.orderId)">立即支付</button>
                    </div>
                    <div v-if="item.status == 1 && item.orderStatus == 4" class="myorder-pay">
                        <button class="pay-bt" @click="evaluateNow(item.orderId)">立即评价</button>
                    </div>
                </li>
                <p v-if="allLoaded&&(selectedIndex==4)" class='allloaded'>已加载全部</p>
               </ul>
              </mt-loadmore>
              <div v-else  class='nodata'> <img class="nodataImg" src="../../assets/img/noData.png" alt=""> </div>
            </div>
            <div v-if='selectedIndex==5' class="box box1" ref='wrapper'  :style="{ height: wrapperHeight + 'px' }">
              <mt-loadmore  :top-method="loadTop" v-if='selectedIndex==5&&allOrderList.length'  :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"  :bottom-drop-text='bottomText' ref="loadmore">
                <ul class="myorder-list" v-if="allOrderList.length" :style="{height:'auto',minHeight: wrapperHeight + 'px'}" >
                 <li class="myorder-li" v-for="(item,index) in allOrderList" :key="index" >
                    <div @click="goto(item.orderStatus,item.status,item.orderId)">
                        <h3 class="myorder-state">订单状态：{{refundOrderStatus[item.status]}}</h3>
                        <div class="myorder-num">
                            <div class="cartbg">
                                <img v-for="(img,index) in item.goodsImgList" :key="index" class="cartbgI" :src="img" alt="">
                            </div>
                            <div class="total">
                                <p>共<span>{{item.goodsNum}}</span>件</p >
                                <img src="./img/zhankai1.png" alt="">
                            </div>
                        </div>
                        <div class="myorder-price">
                            <p class="date">{{item.orderTime}}</p >
                            <p class="price">实付金额:<span>￥{{item.orderAmountTotal}}</span></p >
                        </div>
                    </div>
                    <div v-if="item.status == 1 && item.orderStatus == 1" class="myorder-pay">
                        <button class="pay-bt" @click="payNow(item.orderId)">立即支付</button>
                    </div>
                    <div v-if="item.status == 1 && item.orderStatus == 4" class="myorder-pay">
                        <button class="pay-bt" @click="evaluateNow(item.orderId)">立即评价</button>
                    </div>
                </li>
                <p v-if="allLoaded&&(selectedIndex==5)" class='allloaded'>已加载全部</p>
               </ul>
              </mt-loadmore>
              <div v-else  class='nodata'> <img class="nodataImg" src="../../assets/img/noData.png" alt=""> </div>
            </div>
      </div>
  </div>
</template>

<script>
// import HeaderTop from '../HeaderTop/HeaderTop'
import {mapState} from 'vuex'
import { userInfo } from 'vuex';
import { Loadmore } from 'mint-ui'
export default {
    data () {
        return {
            active: 0,
            num:1,
            size:5,
            allOrderList:[],
            userId:null,
            token:null,
            selectedIndex:0,
            waitPay:[], //待付款
            waitDeliver:[], //待发货
            waitReceive:[], //待收货
            waitEvaluate:[], //待评价
            waitRefund:[], //待退款
            selectItems:[{"name":"全部",status:0},{"name":"待付款",status:1},{"name":"待发货",status:2},{"name":"待收货",status:3},{"name":"待评价",status:4},{"name":"退款",status:10}],
            allOrderStatus:['','待付款','待发货','待收货','待评价','订单完成'],
            refundOrderStatus:['','正常','已取消','已退款','退款审核中','拒绝退款','退款中'],
            status:0,
            code:0,
            path:'',
            query:null,
            allLoaded:false,
            autofill:false,
            bottomText:"上拉加载更多",
            loadMoreConfig:{
                bottomDistance:100,
                autoFill:false,
            },
            wrapperHeight:'100%'
        };
    },

    components: {
        // HeaderTop,
        'mt-loadmore':Loadmore
    },

    computed: {
        ...mapState(['userInfo']),
    },
    async created(){
        this.selectedIndex = this.$route.query.id
        this.showActive()
        this.userId = this.userInfo.userInfo.id
        this.token = this.userInfo.token
        const num = 1
        this.initData()
    },
    mounted(){
        this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
    },
    methods: {
        async payNow(id){
            console.log('立即支付',id)
            this.orderInfoId = id
            this.userId = this.userInfo.userInfo.id
            this.token = this.userInfo.token
            const result = await this.API.reqOrderDetail({userId:this.userId,token:this.token,orderInfoId:this.orderInfoId})
            console.log('11',result.retData.orderInfo)
            this.orderInfo = result.retData.orderInfo

            // 把订单信息存起来
            localStorage.setItem('orderInfoId',this.orderInfo.id) 
            localStorage.setItem('orderNo',this.orderInfo.orderNo) 
            localStorage.setItem('orderAmountTotal',this.orderInfo.orderAmountTotal)

            this.$router.push({
                name: 'confirmpay',
                params: {
                    orderInfoId: this.orderInfo.id, //订单id
                    orderNo: this.orderInfo.orderNo, //订单编号
                    orderAmountTotal: this.orderInfo.orderAmountTotal //实付金额
                }
            })
        },
        evaluateNow(id){
            console.log('立即评价',id)
            this.$router.push({path:'/evaluate', query:{id:id}})
        },
        showActive(){
            if(this.query){
                this.active = this.query
            }
        },
        goto(orderStatus,status,id){
            console.log(orderStatus,status,id)
            if(status == 1){
                if(orderStatus == 1){  //未付款
                    this.path = '/waitpay'
                }
                if(orderStatus == 2){  //待发货
                    this.path = '/waitdeliver'
                }
                if(orderStatus == 3){  //待收货
                    this.path = '/waitreceive'
                }
                if(orderStatus == 4){  //待评价
                    this.path = '/waitevaluate'
                }
                if(orderStatus == 5){ //订单完成
                    console.log('订单完成')
                    this.path = '/ordersuccess'
                }
            }else{
                if(status == 2){ //已取消订单
                    this.path = '/ordersuccess'
                }
                if(status == 3){  //已退款
                    this.path = '/ordersuccess'
                }
                if(status == 4){  //退款审核中
                    this.path = '/waitrefund'
                }
                if(status == 5){  //拒绝退款
                    
                }
                if(status == 6){  //退款中 待退款
                    this.path = '/waitrefund'
                }
            }
            
            console.log(this.path)
            this.$router.push({path:this.path, query:{id:id}})
        },
        //下拉初始化数据
        async initData(){
            this.code = this.selectedIndex
            if(this.selectedIndex == '5'){
                this.code = 10
            }
            const params = {
                userId:this.userId,
                token:this.token,
                code:this.code,
                num:this.num,
                size:this.size
            }
            const result = await this.API.reqOrderList(params)
            if(result.retCode === '000'){
                this.allOrderList = result.retData
                console.log(this.allOrderList)
            }
        },
        //获取更多数据
        async getListDataPull(){
            console.log('num',this.num)
            let result = await this.API.reqOrderList({userId:this.userId,token:this.token,code:this.status,num:this.num,size:this.size})
            console.log(result)
            if(result.retData==''||result.retData==[]||result.retData==null){
                this.isHaveMore(false) //禁止上拉
            }else{
                this.allOrderList = this.allOrderList.concat(result.retData?result.retData:[]);
                this.isHaveMore(true)
            }
        },
        //下拉刷新
        loadTop(){
            let self = this;
            this.num = 1;
                setTimeout(function(){
                self.initData();
                if(self.selectedIndex==0){
                    self.$refs.loadmore.onTopLoaded();
                }else if(self.selectedIndex == 1){
                    self.$refs.loadmore1.onTopLoaded();
                }else if(self.selectedIndex == 2){
                    self.$refs.loadmore2.onTopLoaded();
                }else if(self.selectedIndex == 3){
                    self.$refs.loadmore3.onTopLoaded();
                }else if(self.selectedIndex == 4){
                    self.$refs.loadmore4.onTopLoaded();
                }else if(self.selectedIndex == 5){
                    self.$refs.loadmore5.onTopLoaded();
                }else if(self.selectedIndex == 6){
                    self.$refs.loadmore6.onTopLoaded();
                }
                
                },1000)
        },
        // 上拉加载
        loadBottom(){
                let self = this;
                self.num ++;
                console.log('loadmore',this.num)
                setTimeout(function(){
                // if(self.$refs.loadmore){
                    if(self.selectedIndex == 0 && self.$refs.loadmore){
                    self.$refs.loadmore.onBottomLoaded();
                    }else if(self.selectedIndex == 1 && self.$refs.loadmore1){
                    self.$refs.loadmore1.onBottomLoaded();
                    }else if(self.selectedIndex == 2 && self.$refs.loadmore2){
                    self.$refs.loadmore2.onBottomLoaded();
                    }else if((self.selectedIndex ==3) && self.$refs.loadmore3){
                    self.$refs.loadmore3.onBottomLoaded();
                    }else if((self.selectedIndex ==4) && self.$refs.loadmore4){
                    self.$refs.loadmore4.onBottomLoaded();
                    } else if((self.selectedIndex ==5) && self.$refs.loadmore5){
                    self.$refs.loadmore5.onBottomLoaded();
                    }   
                // }
                self.getListDataPull();
                },1000)
        },
        isHaveMore(isHaveMore){
                this.allLoaded = true; //true是禁止上拉加载
                if(isHaveMore){
                    this.allLoaded = false;
                }
        },
        async selectItem(item,index){
            console.log('selectitem')
            this.num = 1
            this.selectedIndex = index
            this.status = item.status
            this.allLoaded = false
            const params = {
                userId:this.userId,
                token:this.token,
                code:this.status,
                num:this.num,
                size:this.size
            }
            console.log('退款',this.status)
            const result = await this.API.reqOrderList(params)
            if(result.retCode === '000'){
                this.allOrderList = result.retData
                console.log(this.allOrderList)
            }
            if(result.retCode !== '000'){
                console.log(result)
            }
        },
    }
}

</script>
<style lang='stylus' scoped>
@import "../../common/stylus/mixins.styl"
.myorder
  height 100%
  padding-bottom 0 !important
//   margin-top 45px
.selectItems
    width 100%
    height 30px
    line-height 30px
    padding-top 5px
    padding-bottom 5px
    display flex
    justify-content space-around
    align-items center 
    li
     line-height 30px
     font-size 16px
   .active
     color red
.box
  width 100%
  overflow-y scroll
.myorder-list
    .myorder-li
        margin-top 12px
        background #fff
        padding 0 15px
        .myorder-state
            font-size 12px
            color #606060
            height 45px
            line-height 45px
            border-bottom 1px solid #F7F7F7
        .myorder-num
            height 90px
            line-height 90px
            border-bottom 1px solid #F7F7F7
            display flex
            justify-content space-between
            .cartbg
                .cartbgI
                    width 50px
                    height 50px
                    margin-top 20px
                    margin-right 5px
                    border-radius 5px
            .total
                font-size 12px
                color #626262
                display flex
                align-items center
                img 
                    display inline-block
                    height 13px
                    margin-left 10px
        .myorder-price
            height 35px
            line-height 35px
            display flex
            justify-content space-between
            .date
                font-size 12px
                color #B0B0B0
            .price
                font-size 14px
                color #626262
                span
                    color red
        .myorder-pay
            height 50px
            border-top 1px solid #F7F7F7
            display flex
            justify-content flex-end
            align-items center
            .pay-bt
                margin 0
                padding 0
                border 1px solid transparent
                outline none
                font-size 12px
                color #fff
                height 28px
                line-height 28px
                width 78px
                background #145B3E
                border-radius 5px
.nodata
  text-align center
  margin-top 30px
  .nodataImg
    width 150px
.allloaded
  text-align center
  width 100%
</style>